<template>
  <div class="parnerIndex">
    <div class="pc">
      <div class="title">
        <self-title :userName="username + name"></self-title>
        <el-button type="primary" @click="dialogFormVisible = true">添加个人顾问</el-button>
      </div>
      <el-dialog title="创建个人顾问用户" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" label-position="left">
          <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人顾客用户名" v-model="form.username" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人顾客用户姓名" v-model="form.name" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人顾客用户邮件" v-model="form.email" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人顾客用户的手机号"
              v-model="form.telephone"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="期望报酬" prop="expectedReward" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人顾客用户的期望报酬"
              type="number"
              v-model="form.expectedReward"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>-->
          <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="form.pass"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass" :label-width="formLabelWidth">
            <el-input
              placeholder="请再次输入密码"
              type="password"
              v-model="form.checkPass"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="brithday" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.brithday"
              type="date"
              placeholder="选择日期时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="从业年限" prop="bmiHistory" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人从业年限"
              v-model="form.bmiHistory"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="education" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人学历" v-model="form.education" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="擅长领域" prop="expertise" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人擅长领域" v-model="form.expertise" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="毕业学校" prop="graduatedFrom" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人毕业学校"
              v-model="form.graduatedFrom"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="从业经历" prop="industryExperience" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人从业经历"
              v-model="form.industryExperience"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major" :label-width="formLabelWidth">
            <el-input placeholder="请输入个人专业" v-model="form.major" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="服务方向" prop="serviceDirection" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入个人服务方向"
              v-model="form.serviceDirection"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="照片" prop="photoUrl">
            <el-upload
              class="upload-demo"
              action="http://112.124.67.43:8088/iot/demand/fileUpload"
              :on-success="PhotoUrl"
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">当前上传照片将会覆盖之前的照片</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="简历" prop="resumeFileUrl">
            <el-upload
              class="upload-demo"
              action="http://112.124.67.43:8088/iot/demand/fileUpload"
              :on-success="personaluserResumeFileUrl"
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一个文件,如果需要上传多个文件,请上传压缩文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPersonal">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        class="advTable"
        stripe
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        >
        <el-table-column label="序号" prop="index" type="index" align="center"></el-table-column>
        <el-table-column label="姓名" prop="userInfo.name" align="center">
          <template slot-scope="scope">
            <div @click="jumpDetail(scope.row)" style="cursor: pointer;">{{scope.row.userInfo.name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.status=='-1'">禁用</p>
            <p v-if="scope.row.status=='0'">启用</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="性别" prop="sex" align="center"></el-table-column> -->
        <el-table-column label="联系方式" prop="telephone" align="center"></el-table-column>
        <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
        <el-table-column prop="userInfo.brithday" label="出生日期" width="120" align="center"></el-table-column>
        <el-table-column prop="userInfo.education" label="学历" width="120" align="center"></el-table-column>
        <el-table-column prop="userInfo.graduatedFrom" label="毕业院校" width="120" align="center"></el-table-column>
        <el-table-column prop="userInfo.major" label="专业" align="center"></el-table-column>
        <el-table-column prop="userInfo.photoUrl" label="照片" align="center">
          <template slot-scope="scope">
            <div>
              <el-image style="width: 70px" :src="scope.row.userInfo.photoUrl"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userInfo.serviceDirection" label="服务方向" align="center"></el-table-column>
        <el-table-column prop="userInfo.industryExperience" label="从业经验" align="center"></el-table-column>
        <el-table-column prop="userInfo.expertise" label="擅长领域" align="center"></el-table-column>
        <!-- <el-table-column label="期望报酬" prop="expectedReward" align="center"></el-table-column>
        <el-table-column label="可用周期" prop="availablePeriod" align="center"></el-table-column>-->
        <el-table-column prop="comprehensiveEvaluation" label="(管理员)综合评价" align="center">
          <template slot-scope="{row}">
            <div v-if="row.value2 !== 0">
              <el-rate disabled v-model="row.value2" :colors="colors" score-template="{row.value2}"></el-rate>
            </div>
            <div v-if="row.value2 === 0">
              <el-button type="text">暂无评分</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button
              v-if="scope.row.status===0"
              @click="disableClick(scope.row.id,scope.row.status)"
              type="text"
              size="small"
            >禁用</el-button>
            <el-button
              v-if="scope.row.status===-1"
              @click="enableClick(scope.row.id,scope.row.status)"
              type="text"
              size="small"
            >启用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="assess" label="合作伙伴评分" width="120" align="center">
          <template slot-scope="scope">
            <div @click="personAssess(scope.row.id)">
              <i class="el-icon-remove-outline" style="font-size: 20px;"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="phone">
      <div class="title">
        <h3>合作伙伴列表</h3>
        <van-icon name="plus" class="addIcon" size="30" @click="adduser" />
      </div>
      <div class="content">
        <div class="user" v-for="(item,index) in tableData" :key="index">
          <van-icon name="user-o" size="40" />
          <p class="username" @click="jumpDetail(item)">{{item.userInfo.name}}</p>
        </div>
      </div>
    </div>
    <!-- 个人评分 -->
    <el-dialog :visible.sync="personAssessVisible" width="60%" class="personAssessStyle">
      <h2>评分</h2>

      <ul>
        <li
          v-for="(item, index) in allSkillAccess"
          :key="'person' + index"
          @click="checkDetailAccess(index)"
        >
          <span :class="{ isChecked: currentIndex === index }">
            {{
            item ? item.textName : ""
            }}
          </span>
        </li>
      </ul>
      <!-- 评分详情 -->
      <div class="accessDetailTitle">
        {{
        allSkillAccess[currentIndex]
        ? allSkillAccess[currentIndex].textName
        : ""
        }}
      </div>
      <div class="accessDetailBox">
        <span
          class="accessDetailItem"
          v-for="(item, index) in allSkillAccess[currentIndex]
              ? allSkillAccess[currentIndex].child
              : []"
          :key="index"
        >
          <span>{{ item.name }}</span>
          <el-rate v-model="item.score"></el-rate>
        </span>
      </div>

      <div class="btnBox">
        <el-button size="mini" type="primary" @click="saveAccessDetail">保 存</el-button>
        <el-button type="primary" size="mini" @click="personAssessVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selfTitle from "../../../components/SelfTitle";
import { ReqPersonal } from "../../../request/index";
import { ReqDelete } from "../../../request/index";
import { ReqProhibit } from "../../../request/index";
import { ReqAddPersonal, ReqPartnerScored,ReqUserexit } from "../../../request/index";
import abilityText from "../../../utils/abilityText.json";
export default {
  components: {
    selfTitle
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.checkPass !== "") {
          this.$refs.form.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      personAssessVisible: false,
      // 全部技能
      allSkillAccess: [],
      // 当前选中的技能
      currentIndex: 0,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      formLabelWidth: "100px",
      dialogFormVisible: false,
      username: "合作伙伴用户",
      name: "",
      tableData: [],
      form: {
        username: "",
        name: "",
        email: "",
        telephone: "",
        expectedReward: "",
        pass: "",
        checkPass: "",
        bmiHistory: "",
        brithday: "",
        education: "",
        expertise: "",
        graduatedFrom: "",
        photoUrl: "",
        resumeFileUrl: "",
        serviceDirection: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" }
        ],
        expectedReward: [
          { required: true, message: "请输入期望报酬", trigger: "blur" }
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        bmiHistory: [
          { required: true, message: "请输入从业年限", trigger: "blur" }
        ],
        brithday: [{ required: true, message: "请选择生日", trigger: "blur" }],
        education: [{ required: true, message: "请输入学历", trigger: "blur" }],
        expertise: [
          { required: true, message: "请输入擅长领域", trigger: "blur" }
        ],
        graduatedFrom: [
          { required: true, message: "请输入毕业院校", trigger: "blur" }
        ],
        industryExperience: [
          { required: true, message: "请输入从业经历", trigger: "blur" }
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        serviceDirection: [
          { required: true, message: "请输入服务方向", trigger: "blur" }
        ]
        // photoUrl: [{ required: true, message: "请输入毕业院校", trigger: "blur" }],
        // resumeFileUrl: [{ required: true, message: "请输入毕业院校", trigger: "blur" }],
      }
    };
  },
  methods: {
    // 处理个人顾问评分
    dealPersonAssess() {
      const allSkillAccess = abilityText.text;
      this.allSkillAccess = allSkillAccess;
    },
    //评分
    personAssess(id) {
      this.personalId = id;
      // console.log(id);
      this.personAssessVisible = true;
    },
    //选择具体的评分
    checkDetailAccess(index) {
      this.currentIndex = index;
    },
    // 保存具体的评分信息
    async saveAccessDetail() {
      const data = {
        createdId: sessionStorage.getItem("id"), //合作伙伴的id
        scoreDetails: JSON.stringify({ score: this.allSkillAccess }),
        scoredId: this.personalId
      };
      // console.log(data);
      const resultInfo = await ReqPartnerScored(data);
      const { code } = resultInfo;
      if (code === 0) {
        this.$message({
          type: "success",
          message: "评分成功"
        });
      }
      this.personAssessVisible = false;
    },
    //手机端跳转到添加个人顾客
    adduser() {
      this.$router.push("/self/parnter/partAdduser");
    },
    //跳转到详情页
    jumpDetail(row) {
      // console.log(row);
      this.$router.push({
        path: "/self/parnter/partDetail",
        query: {
          info: row
        }
      });
    },
    //删除
    async deleteClick(row) {
      // console.log(row.id);
      let data = [row.id];
      let result = await ReqDelete(data);
      if (result.msg === "success") {
        this.$message({
          showClose: true,
          message: "恭喜你，删除成功",
          type: "success"
        });
        this.$router.go(0);
      } else {
        this.$message({
          showClose: true,
          message: "删除失败",
          type: "error"
        });
      }
    },
    //禁用
    async disableClick(id, status) {
      let data = {
        id: id,
        status: 1
      };
      let disableInfo = await ReqProhibit(data);
      if (disableInfo.msg === "success") {
        this.$message({
          showClose: true,
          message: "恭喜你，禁用成功",
          type: "success"
        });
        this.$router.go(0);
      } else {
        this.$message({
          showClose: true,
          message: "禁用失败",
          type: "error"
        });
      }
    },
    //解除禁用
    async enableClick(id, status) {
      let data = {
        id: id,
        status: 0
      };
      let disableInfo = await ReqProhibit(data);
      if (disableInfo.msg === "success") {
        this.$message({
          showClose: true,
          message: "恭喜你，解除禁用成功",
          type: "success"
        });
        this.$router.go(0);
      } else {
        this.$message({
          showClose: true,
          message: "解除禁用失败",
          type: "error"
        });
      }
    },
    //查询某个合作伙伴用户下的个人顾问
    async getTableList() {
      let data = {
        id: sessionStorage.getItem("id")
        // id: 1
      };
      let List = await ReqPersonal(data);
      // console.log(List);
      this.tableData = List.data.personalUserEntities;
    },
   //添加个人用户
    async addPersonal() {
      let data = {
        cooperativeUserId: sessionStorage.getItem("id"),
        email: this.form.email,
        password: this.form.pass,
        personalUserDetails: {
          bmiHistory: this.form.bmiHistory, //从业年限
          brithday: this.form.brithday, //生日
          education: this.form.education, //学历
          expertise: this.form.expertise, //擅长领域
          graduatedFrom: this.form.graduatedFrom, //毕业学校
          id: "",
          industryExperience: this.form.industryExperience, //从业经历
          major: this.form.major, //专业
          name: this.form.name,
          photoUrl: this.form.photoUrl, //照片
          resumeFileUrl: this.form.resumeFileUrl, //简历
          serviceDirection: this.form.serviceDirection, //服务方向
          status: 0
        },
        telephone: this.form.telephone,
        username: this.form.username
      };
      let username = {
        username: this.form.username
      };
      let userexit = await ReqUserexit(username);
      // console.log(userexit);
      if (userexit.code === 0) {
        let PersonalInfo = await ReqAddPersonal(data);
        // console.log(PersonalInfo);
        if (PersonalInfo.msg === "success") {
          this.$message({
            showClose: true,
            message: "恭喜你，添加成功",
            type: "success"
          });
          this.$router.go(0);
        } else {
          this.$message({
            showClose: true,
            message: "添加失败",
            type: "error"
          });
        }
      } else if (userexit.code === 500) {
        this.$message({
          showClose: true,
          message: "添加失败  用户名已存在",
          type: "error"
        });
      } else {
        this.$message({
          showClose: true,
          message: "添加失败",
          type: "error"
        });
      }
    },
    PhotoUrl(response, file, fileList) {
      this.form.photoUrl = response.msg;
    },
    personaluserResumeFileUrl(response, file, fileList) {
      this.form.resumeFileUrl = response.msg;
    }
  },
  async created() {
    await this.getTableList();
    this.dealPersonAssess();
  }
};
</script>

<style scoped>
.parnerIndex {
  width: 95%;
  margin: 0 auto;
}
.parnerIndex .phone {
  display: none;
}
.parnerIndex .pc .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parnerIndex .pc .self-title {
  padding: 0 !important;
}
.el-input {
  width: 80% !important;
}
.el-dialog {
  background: #333333;
  width: 520px !important;
}
@media screen and (max-width: 420px) {
  .parnerIndex {
    width: 100%;
    background: #ffffff;
  }
  .parnerIndex .pc {
    display: none;
  }
  .parnerIndex .phone {
    display: block;
    width: 100%;
  }
}
.parnerIndex .phone .title {
  width: 100%;
  background: #333;
  height: 50px;
  line-height: 50px;
}
.parnerIndex .phone .title h3 {
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}
.parnerIndex .phone .title .addIcon {
  color: #fff;
  position: relative;
  top: -45px;
  left: 330px;
}
.parnerIndex .phone .content {
  width: 85%;
  margin: 0 auto;
}
.parnerIndex .phone .content .user {
  display: flex;
  align-items: center;
  height: 70px;
}
.parnerIndex .phone .content .user .username {
  height: 70px;
  line-height: 70px;
  margin-left: 10px;
}
.parnerIndex .phone .content .user .van-icon {
  height: 70px;
  line-height: 70px;
}
.isChecked {
  color: #f0ab00 !important;
}
.accessDetailTitle {
  text-align: center;
  font-size: 18px;
  line-height: 40px;
}
.accessDetailBox {
  display: flex;
  flex-wrap: wrap;
}
.accessDetailItem {
  width: 50%;
  display: flex;
  line-height: 30px;
}
.accessDetailItem :nth-child(1) {
  flex: 2;
  color: #ccc;
}
.accessDetailItem :nth-child(2) {
  flex: 1;
}
.AssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
.AssessStyle ul {
  display: flex;
  flex-wrap: wrap;
}
.AssessStyle ul li {
  width: 50%;
  display: flex;
  margin-top: 20px;
}
.AssessStyle ul li > :nth-child(n) {
  flex: 1;
  font-size: 14px;
  color: white;
  text-align: center;
}
.btnBox {
  text-align: center;
  margin-top: 40px;
}
.btnBox .el-button {
  margin: 0px 30px;
  background: #1b93c4;
  padding: 10px 30px;
}

.personAssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}
.personAssessStyle ul {
  display: flex;
  flex-wrap: wrap;
}
.personAssessStyle ul li {
  width: 33%;
  text-align: center;
  margin: 30px 0px 20px 0px;
}
.personAssessStyle ul li span {
  padding: 12px 20px;
  background: rgba(156, 156, 156, 0.21);
  border-radius: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
}
</style>
